<html>
  <style>
    body {
	display:block;
	font-size: 12px;
	height: 320mm;
	width: 250mm;
    }

    .print {
	height:100%;
	width: 100%;
        border: 1px solid;
    }

    .content {
        margin: 5mm 20mm;
    }

    .header {
	font-size:25px;
	font-weight:bold;
      float: left;
    }

    .subHeader, .invoiceInfo {
	font-size:13px;
	display:inline;
    }

    .subHeader-right, .invoiceInfo-right {
	text-align:right;
        width:30%;
        position:relative;
        float: right;
	font-size: 15px;
    }

    .subHeader-right {
        font-size:20px;
        font-weight:bold;
    }

    .invoiceInfo-left {
	font-size: 14px;
    }

    .subHeader-left, .invoiceInfo-left {
	text-align:left;
        position:relative;
        width:70%;
        float: left;
    }

    .bill {
        display:block;
        height: 60%;
        width: 100%;
        float: left;
    }

    .billInfo, .billInfo-item {
        margin-top:3px;
        display:inline;
        width: 100%;
	float: left;
    }

    .billInfo-item {
       padding-top:5px;
       font-size: 12px;
    }

    .ticketNo {
        width: 25%;
        padding-left: 8px;
	float: left;
	font-size: 14px;
    }

    label {
        font-size: 14px;
    }

    .passenger-name {
        width: 60%;
	float: left;
	font-size: 14px;
    }

    .passenger-info {
       font-size: 12px;
    }

    .calculation label {
       text-align: left;
    }

    .calculation, .footer-total-label {
	float: left;
        text-align: right;
        width: 9%;
        margin-left:10px;
	font-size: 14px;
    }

    .bill-tax, .bill-footer, .footer {
        width: 100%;
	float: left;
	margin-top: 5px;
    }

    .footer {
       font-size: 11px;
    }

    .bill-tax {
	padding-top: 20px;
    }

    .junk {
	width:60%;
        padding-left: 8px;
	float:left;
	text-align:left;
    }

    .bill-tax-label {
	float: left;
	text-align: right;
	width: 25%;
	font-size: 14px;
	margin-right: 6px;
    }

    .numToWord {
        width: 75%;
        padding-left: 8px;
	float:left;
	text-align:left;
    }

    .top-ruler, .bottom-ruler {
        float:left;
	width:100%;
    }

    .top-ruler {
	border-bottom:2px double;
	margin-bottom:5px;
    }

    .bottom-ruler {
	border-bottom:2px double;
	margin-top:5px;
    }
  </style>
<body>
  <div class="print">
    <div class="content">
      <div class="header">
	<span>THEME TOURS AND TRAVELS</span>
	<div class="subHeader" >
	  <div class="subHeader-left">
	    <strong>Shri Krishna Niwas, D. J. Road, Vile Parle (W) MUMBAI - 400056. INDIA</strong> <br />
	    Tele : <strong>+91 22 66789770</strong>
	  </div>
	  <div class="subHeader-right">INVOICE</div>
	  <div class="bottom-ruler"> &nbsp;</div>
	</div>
      </div>
      <div class="invoiceInfo">
	<div>&nbsp;</div>
	<div class="invoiceInfo-left">
	  {{ client.display_name }}<br />
	  {{ client.address_line1 }}<br />
	  {{ client.address_line2 }}<br />
	  {{ client.city }}, {{ client.state }}<br />
	  {{ client.country }}, {{ client.zip }}<br />
	</div>
	<div class="invoiceInfo-right">
	  <div> Invoice No: {{ sale.sales_transaction_no }} </div>
	  <div> Date: {{ sale.sales_date|date:"d M Y" }} </div>
	</div>
      </div>

      <div class="bill">
	<div class="billInfo">
	  <div class="top-ruler"></div>
	  <div class="ticketNo"><label>Ticket No</label></div>
	  <div class="passenger-name"><label>Passenger Name</label></div>
	  <div class="calculation"><label>Amount(Rs)</label></div>
	  <div class="bottom-ruler"></div>
	</div>
	{% for pax in paxInfo %}
	<div class="billInfo-item">
	  <div class="ticketNo">{{ pax.transaction_no }}</div>
	  <div class="passenger-name">
	    {{ pax.pax_name }}
	    <div class="passenger-info" >
	    {{pax.sector_from1|upper }}-{{ pax.sector_to1|upper}}&nbsp;&nbsp;{{pax.airline_name1|upper}}&nbsp;&nbsp;{{pax.travel_date1|date:"d M Y"}}

	    {% if pax.sector_from2 %}
	    <br /> {{ pax.sector_from2|upper }}-{{ pax.sector_to2|upper }}&nbsp;&nbsp;{{ pax.airline_name2|upper }}&nbsp;&nbsp;{{pax.travel_date2|date:"d M Y"}}
	    {% endif %}

	    {% if pax.sector_from3 %}
	    <br /> {{ pax.sector_from3|upper }}-{{ pax.sector_to3|upper }}&nbsp;&nbsp;{{ pax.airline_name3|upper }}&nbsp;&nbsp;{{pax.travel_date3|date:"d M Y"}}
	    {% endif %}

	    {% if pax.sector_from4 %}
	    <br /> {{ pax.sector_from4|upper }}-{{ pax.sector_to4|upper }}&nbsp;&nbsp;{{ pax.airline_name4|upper }}&nbsp;&nbsp;{{pax.travel_date4|date:"d M Y"}}
	    {% endif %}

	    {% if pax.sector_from5 %}
	    <br /> {{ pax.sector_from5|upper }}-{{ pax.sector_to5|upper }}&nbsp;{{ pax.airline_name5|upper }}&nbsp;{{pax.travel_date5|date:"d M Y"}}
	    {% endif %}

	    {% if pax.sector_from6 %}
	    <br /> {{ pax.sector_from6|upper }}-{{ pax.sector_to6|upper }}&nbsp;&nbsp;{{ pax.airline_name6|upper }}&nbsp;&nbsp;{{pax.travel_date6|date:"d M Y"}}
	    {% endif %}
	    </div>
	  </div>
	  <div class="calculation">
	    {% if 1 == forloop.counter %}
	    {{ pax.basic_fare|add:pax.airline_taxes|add:sale.additional_service_charge|floatformat:2 }}
	    {% else %}
	    {{ pax.basic_fare|add:pax.airline_taxes|floatformat:2}}
	    {% endif %}
	  </div>
	</div>
	{% endfor %}
      </div>

      <div class="bill-footer">
	<div class="bill-tax">

	  <div class="junk">&nbsp;</div>
	  <div class="bill-tax-label">Gross Total</div>
	  <div class="calculation">{{ gross|floatformat:2 }}</div>

	  <div class="junk">&nbsp;</div>
	  <div class="bill-tax-label">Add: Service Tax@1.24%</div>
	  <div class="calculation">{{ tax|add:sale.round_off|floatformat:2 }}</div>

	  <div class="junk">&nbsp;</div>
	  <div class="bill-tax-label">Less: Handling charges</div>
	  <div class="calculation">{{ sale.discount|floatformat:2 }}</div>
	</div>
	<div class="top-ruler"></div>
	<div class="numToWord">
	  {% load numToword %}
	  {{ sale.total|floatformat:0|numToINR }}
	</div>
	<div class="footer-total-label"> Total Rs.</div>
	<div class="calculation"> {{ sale.total|floatformat:0|floatformat:2 }} </div>
	<div class="bottom-ruler"></div>
      </div>

      <div class="footer">
	<strong>E & O.E. </strong><br />
	<li>This is a 'Computer Generated Document' and does not require any official signature.</li>
	<li>You are requested to notify us immediately, if you find any discrepancies in the document. </li>
	<li>All payment must be crossed <strong>A/c Payee only</strong> and in favour of <b>M/s. THEME TOURS &amp; TRAVELS.</b></li>
	<li>Penal Interest will be charged in case payment is made after due date of the document. </li>
	<li>Service Tax Reg No: AAHFT6849F5D001</li>
      </div>
    </div>
  </div>
</body>
</html>
